<template>
	<view id="cat-food">
		<view :style="{'height':marginTop+'px'}"></view>
		<view class="fixed">
			<!-- 搜索 -->
			<view class="sort-search">
				<LhSamllSearch :value="params.keywords" @confirm="confirm" :disabled="true" @search="search"></LhSamllSearch>
			</view>
			<!-- tab切换 -->
			<!-- <view class="tab-box">
				<view class="tab-item" v-for="(item,i) in cate" :key="item.id" @click="tabClick(i,item.id)">
					<text :class="{'icon-txt-active': tabIndex===i}">{{item.name}}</text>
					<icon class="icon-tab-active" v-if="tabIndex===i"></icon>
				</view>
			</view> -->
		</view>
		<!-- 瀑布流布局 -->
		<scroll-view scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered" @refresherpulling="refresherpulling"
		 @refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower" :style="{'height':scrollTop+'px'}" v-if="list.length>=1">
			<view class="shop-list">
				<!-- 左 -->
				<view class="shop-list-left" style="width: 48%;">
					<view class="shop-item" v-for="(item,i) in list" :key="item.id" v-if="i%2==0" @click="bindDetail(item.id)">
						<view class="shop-img">
							<image :src="IMG_URL+item.img" mode="aspectFill"></image>
						</view>
						<view class="shop-content">
							<view class="s-neir">{{item.name}}</view>
							<view class="s-pingl">{{item.comment}}条评论</view>
							<view class="s-price">
								<view class="s-price-xj"><text>¥</text>{{item.price}}</view>
								<view class="s-price-yj" v-if="item.market_price">¥{{item.market_price}}</view>
							</view>
						</view>
					</view>
				</view>
				<!--右 -->
				<view class="shop-list-rigth" style="width: 48%;">
					<view class="shop-item" v-for="(item,i) in list" :key="item.id" v-if="i%2!=0" @click="bindDetail(item.id)">
						<view class="shop-img">
							<image :src="IMG_URL+item.img" mode="aspectFill"></image>
						</view>
						<view class="shop-content">
							<view class="s-neir">{{item.name}}</view>
							<view class="s-pingl">{{item.comment}}条评论</view>
							<view class="s-price">
								<view class="s-price-xj"><text>¥</text>{{item.price}}</view>
								<view class="s-price-yj" v-if="item.market_price">¥{{item.market_price}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="state"></uni-load-more>
		</scroll-view>
		<!-- 没有数据 -->
		<view class="no-list" v-if="list.length<1">
			<image src="../../static/images/collection-no.png" mode=""></image>
			<text>暂无数据</text>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import {
		nabercatHomecate,
		nabercatPage
	} from '@/api/index.js'
	import LhSamllSearch from '@/wxcomponents/lh-small-search/lh-small-search.vue'
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		components: {
			LhSamllSearch,
			uniLoadMore
		},
		data() {
			return {
				IMG_URL: app.globalData.IMG_URL, //图片前缀
				marginTop: 0,
				scrollTop: 0,
				triggered: true, //下拉刷新
				cate: [], //分类数据
				tabIndex: 0, //选择的分类索引
				params: {
					page: 1, //当前页数
					keywords: '', //搜索
					brand: '', //搜索id
					tag: '', //分类id
					hot:0,
					rec:0,
					sold:0,
				}, //请求数据
				list: [], //商品列表
				total: 1, // 总页数
				state: 'more', //加载显示
			}
		},
		methods: {
			// 分类
			nabercatHomecate: function() {
				nabercatHomecate().then(res => {
					res.unshift({
						id: "",
						name: "全部"
					})
					this.cate = res
				})
			},

			// 商品列表
			nabercatPage: function() {
				nabercatPage(this.params).then(res => {
					if (res.pagenum == res.total || res.total == 0) {
						this.state = 'noMore'
					} else {
						this.state = 'more'
					}
					this.total = res.total;
					this.list = this.list.concat(res.list);
					this.triggered = false
				})
			},

			// tab选择
			tabClick: function(index, id) {
				this.tabIndex = index;
				this.params.page = 1;
				this.params.tag = id;
				this.list = [];
				this.nabercatPage();
			},

			// 上拉加载
			scrolltolower: function() {
				if (this.total == this.params.page) {
					return false;
				}
				this.params.page += 1;
				this.nabercatPage();
			},

			// 自定义下拉刷新控件被下拉
			refresherpulling: function() {
				
			},

			// 自定义下拉刷新被触发
			refresherrefresh: function() {
				this.triggered = true
				this.params.page = 1;
				this.list = [];
				this.nabercatPage();
			},

			// 搜索
			confirm: function(e) {
				this.params.keywords = e;
				this.params.page = 1;
				this.list = [];
				this.nabercatPage();
			},
			
			search: function() {
				let status ='';
				if(this.params.hot==1){status=1}
				if(this.params.sold==1){status=2}
				if(this.params.rec==1){status=3}
				uni.redirectTo({
					url: `/pageA/search/search?status=${status}&keywords=${this.params.keywords}&brand=${this.params.brand}&tag=${this.params.tag}`
				})
			},
			
			// 跳转详情
			bindDetail:function(id){
				uni.navigateTo({
					url:`/pageA/goodDetail/goodDetail?id=${id}`
				})
			}
		},
		onLoad(options) {
			// 获取参数
			if(options.status==1){
				this.params.hot=1;
			}
			if(options.status==2){
				this.params.sold=1;
			}
			if(options.status==3){
				this.params.rec=1;
			}
			this.params.keywords = options.keywords != undefined ? options.keywords : ''
			this.params.brand = options.brand != undefined ? options.brand : ''
			this.params.tag = options.tag != undefined ? options.tag : ''
			// 接口请求
			this.nabercatHomecate(); //分类
			this.nabercatPage(); //商品列表
		},
		onReady() {
			const query = uni.createSelectorQuery().in(this);
			// 获取窗口可用高度
			uni.getSystemInfo({
				success: (res) => {
					// 获取搜索框高度
					query.select(".fixed").boundingClientRect((data) => {
						this.scrollTop = res.windowHeight - data.height;
						this.marginTop = data.height;
					}).exec()
				}
			});
		}
	}
</script>

<style scoped lang="scss">
	#cat-food {
		width: 100%;
		background: #F5F5F5;
		// height: 100vh;

		.fixed {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;

			.sort-search {
				padding: 12rpx 32rpx;
				background: #FFC102;
			}

			.tab-box {
				height: 89rpx;
				width: 100%;
				background: #FFFFFF;
				padding: 0 35rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #666666;
				font-size: 28rpx;

				.tab-item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.icon-txt-active {
						color: #333333;
						font-size: 36rpx;
						font-weight: 600;
					}

					.icon-tab-active {
						width: 38rpx;
						height: 12rpx;
						background: url(../../static/images/icon-tab-active.png) no-repeat;
						background-size: cover;
						margin-top: 4rpx;
					}
				}
			}
		}
	}

	.shop-list {
		display: flex;
		justify-content: space-between;
		padding: 16rpx 28rpx;

		.shop-item {
			background: #FFFFFF;
			margin-bottom: 20rpx;
			border-radius: 16rpx;

			.shop-img {
				width: 100%;
				height: 340rpx;

				&>image {
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
				}
			}

			.shop-content {
				padding: 18rpx 11rpx 21rpx 16rpx;

				.s-neir {
					color: #333333;
					font-size: 28rpx;
					margin-bottom: 8rpx;
					font-weight: 600;
				}

				.s-pingl {
					color: #CCCCCC;
					font-size: 20rpx;
					margin: 0 0 6rpx 6rpx;
				}

				.s-price {
					display: flex;
					align-items: center;

					.s-price-xj {
						color: #F6240C;
						font-size: 36rpx;
						margin-right: 12rpx;

						&>text {
							font-size: 24rpx;
						}
					}

					.s-price-yj {
						font-size: 24rpx;
						color: #CCCCCC;
						text-decoration: line-through;
					}
				}
			}
		}
	}

	.no-list{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 288rpx;
		background: #FFFFFF;
		&>image{
			width: 423rpx;
			height: 266rpx;
			margin-bottom: 36rpx;
		}
		&>text{
			color: #333333;
			font-size: 24rpx;
		}
		&>button{
			width: 360rpx;
			height: 78rpx;
			background: #FFC102;
			border-radius: 39rpx;
			color: #FFFFFF;
			line-height: 78rpx;
			margin-top: 88rpx;
		}
	}
</style>
